// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
@import '../../common/styles/colors.scss';
@import '../../common/icons/icon.scss';
@import '../../common/styles/fonts.scss';

$outcome-pass-color: $positive-outcome;
$outcome-incomplete-border-color: $incomplete-color;
$outcome-incomplete-summary-background: $neutral-outcome;
$outcome-incomplete-summary-consistent-foreground: $always-white;
$outcome-fail-color: $negative-outcome;
$outcome-inapplicable-color: $neutral-outcome;
$outcome-count-border-size: 1.5px;
$standard-icon-size: 16px;
$outcome-not-applicable-color: $neutral-outcome;

.outcome-summary-bar {
    $outcome-summary-icon-size: 16px;

    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 0;
    line-height: 24px;
    font-size: 17px;
    font-weight: 600;
    white-space: pre-wrap;

    .block,
    %block {
        font-family: $font-family;
        line-height: 20px;
        font-size: 16px;
        color: $neutral-0;
        padding-top: 8px;
        padding-right: 8px;
        padding-bottom: 10px;
        padding-left: 10px;
        height: 16px;
        display: flex;
        align-items: center;
        margin-right: 4px;
    }

    .count {
        font-weight: 600;
    }

    .fail {
        @extend %block;
        @include cross-icon-styles($outcome-summary-icon-size, 0, $outcome-fail-color);

        .check-container {
            bottom: -1px;
            margin-right: 8px;
        }

        background-color: $outcome-fail-color;
    }

    .pass {
        @extend %block;
        @include check-icon-styles($outcome-summary-icon-size, 0, $outcome-pass-color);

        .check-container {
            bottom: -1px;
            margin-right: 8px;
            margin-left: 4px;
        }

        background-color: $outcome-pass-color;
    }

    .inapplicable,
    .unscannable {
        @extend %block;
        @include inapplicable-icon-styles(
            $outcome-summary-icon-size,
            0,
            $outcome-not-applicable-color
        );

        .check-container {
            bottom: -1px;
            margin-right: 8px;
            margin-left: 4px;
        }

        background-color: $outcome-not-applicable-color;
    }

    .incomplete {
        @extend %block;
        @include incomplete-icon-styles(14px, 3px);

        .check-container {
            margin-right: 6px;
            border-color: $outcome-incomplete-summary-consistent-foreground;
        }

        background-color: $outcome-incomplete-summary-background;
        color: $outcome-incomplete-summary-consistent-foreground;
        border: 2px $outcome-incomplete-border-color solid;
        height: 12px;
    }

    .summary-bar-left-edge {
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }

    .summary-bar-right-edge {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        margin-right: 0;
    }

    .label {
        font-weight: bold;
    }
}
